<template>
    <div ref="ChinaEchart" class="chinaechart"></div>
</template>

<script>
// import echarts from 'echarts'
import chinaJSON from '../assets/china.json'
// import heatmapdata from '../assets/heatmapData'
export default {
  data() {
      return {
        heatmapdata: require('../assets/heatmapData.json'), //地图json数据
      }
    },
  mounted() {
    console.log('testData',this.heatmapdata)
      this.ByGeoRegister()
    },
  methods:{
    ByGeoRegister() {
        let myChart = this.$echarts.init(this.$refs.ChinaEchart) //这里是为了获得容器所在位置
        window.onresize = myChart.resize
        this.$echarts.registerMap('china', chinaJSON)
        myChart.setOption({ // 进行相关配置
          backgroundColor: "#FFFFFF",
          title:{
            text: "",
            subtext: "",
            // x: "center"
          },
          tooltip: {
            trigger: "item"
          }, // 鼠标移到图里面的浮动提示框
          geo: { // 这个是重点配置区
            map: 'china',
            label: {
              show: false
            },
            roam: true,
            itemStyle: {
              areaColor: '#323c48',
              borderColor: '#111',
            },
            emphasis: {
              areaColor: '#2a333d'
            }
          },
          series: [
            {
              name: '热力图', // 浮动框的标题
              type: 'heatmap',
              coordinateSystem: 'geo',
              pointSize: 5,
              blurSize: 20,
              minOpacity: 0,
              maxOpacity: 0.9,
              map: 'china',
              emphasis:{
                show: false
              },
              data: this.heatmapdata
            }
          ],
          visualMap: [{
            min: 0,
            max: 10,
            show: true,
            inRange: {
                color: ["#50a3ba", "#eac736", "#d94e5d"]
            },
            // textStyle: {
            //     color: '#fff'
            // }
          }],
        })
      }
  }
}
</script>

<style scoped>
.chinaechart{
  height: 100%;
}
</style>
